<template>
    <div class="wrap">
        <div><filter-params @paramsChange="paramsChange" :config="config" :filterParams="config.filterParams" ></filter-params></div>
        <div style="height: 100%" :ref="config.alias"></div>
    </div>
</template>

<script>
import ChartPublic from '../formComponent/ChartPublic'

export default {
    /**
     * 仪表盘
     */
    name: "gauge-component",
    mixins: [ChartPublic],
    data() {
        return {
        }
    },
    methods: {
        setOption() {
            var gaugeColours=[];
            //用于标记颜色是否填满了100%
            var falg=false;
            //仪表盘颜色
            if(this.config.gaugeColours){
                for (var i = 0; i < this.config.gaugeColours.length; i++) {
                    if(this.config.gaugeColours[i].percent){
                        var arr=[];
                        var number=this.config.gaugeColours[i].percent/100;
                        if(number==1){
                            falg=true;
                        }
                        arr.push(number);
                        arr.push(this.config.gaugeColours[i].colour);
                        gaugeColours.push(arr)
                    }
                }
                //颜色未填满了100%
                if(!falg){
                    gaugeColours.push([1, '#3fb1e3'])
                }
            }else {
                //默认颜色
                gaugeColours= [
                    [0.5, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                ];
            }

            var data=[];
            for (var i = 0; i < this.config.measures.length; i++) {
                var measure=this.config.measures[i];
                var key=measure.tableName+"_"+measure.fieldName;
                var obj={
                    name: measure.fieldLabel
                }
                for (var j = 0; j < this.data.length; j++) {
                    if(!obj.value){
                        obj.value=this.data[j][key];
                    }else {
                        obj.value+=this.data[j][key];
                    }
                }
                if(this.config.measures.length>1){
                    var val=0;
                    //配置长度为偶数时
                    if(this.config.measures.length%2==0){
                        //取一半作为标记
                        var num=this.config.measures.length/2;
                        if(i<num){
                            val="-"+(50/num)*(i+1);
                        }else {
                            val=(50/num)*(i+1-num);
                        }
                    }else {
                        var num=Math.floor(this.config.measures.length/2);
                        if(i<num){
                            val="-"+(50/num)*(i+1);
                        }else if(i==num) {
                            val="0";
                        }else {
                            val=(50/num)*(i-1);
                        }
                    }
                    obj.title={
                        offsetCenter: [val+'%', '80%']
                    };
                    obj.detail={
                        offsetCenter: [val+'%', '95%']
                    };
                }
                data.push(obj);
            }
            this.option = {
                title: {
                    text: this.config.name,
                    show:this.config.showName,
                    left: this.config.advConfig.titleLeft
                },
                series: [{
                    type: 'gauge',
                    axisLine: {
                        lineStyle: {
                            width: 30,
                            color: gaugeColours
                        }
                    },
                    pointer: {
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '#fff',
                            width: 4
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {show:this.config.advConfig.saveAsImage},
                            restore: {show: this.config.advConfig.restore}
                        }
                    },
                    axisLabel: {
                        color: 'auto',
                        distance: 40,
                        fontSize: this.config.advConfig.fontSize?this.config.advConfig.fontSize:20
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value} '+this.config.advConfig.formatter?this.config.advConfig.formatter:"",
                        fontSize: 14,
                        color: 'auto'
                    },
                    min:this.config.advConfig.min?this.config.advConfig.min:0,
                    max:this.config.advConfig.max?this.config.advConfig.max:100,
                    data: data
                }]
            };
        }
    }
}
</script>

<style>

</style>